<template>
	<view class="padd20 bg-white radius20">
		<!-- 头部 -->
		<view class="fo-gray flex just-spa-bet">
			<view class="">
				<text class="mr20 fo-30">专注时长分布</text>
				<text>
					<text v-show='StartData'>{{StartData}}</text>
					<text v-show='EndData' class="paddlr20"> ~ </text>
					<text v-show='EndData'>{{EndData}}</text>
				</text>
			</view>
			<view class="flex ali-cen">
				<text class="cuIcon-back mr40" @click="onPre"></text>
				<text class="cuIcon-right" @click="onNext"></text>
			</view>
		</view>
		<!-- 按钮部分 -->
		<view class="radius50 ove-hide mt20 bor-1-ebebeb fo-gray flex just-spa-bet">
			<text class="flex1 text-center paddtb10" :class="{CurrentSelectBtn:CurrentBtnIndex===0}" @click="onSel('0')">日</text>
			<text class="flex1 text-center paddtb10" :class="{CurrentSelectBtn:CurrentBtnIndex===1}" @click="onSel('1')">周</text>
			<text class="flex1 text-center paddtb10" :class="{CurrentSelectBtn:CurrentBtnIndex===2}" @click="onSel('2')">月</text>
			<text class="flex1 text-center paddtb10" :class="{CurrentSelectBtn:CurrentBtnIndex===3}" @click="onSel('3')">自定义</text>
		</view>


		<!-- 饼图 -->
		<view class="bg-white relative" style="min-height: 500rpx;">
			<view class="qiun-charts" v-show="PieData.length>0">
				<!--#ifdef MP-ALIPAY -->
				<canvas canvas-id="canvasPie" id="canvasPie" class="charts" :width="cWidth*pixelRatio" :height="cHeight*pixelRatio"
				 :style="{'width':cWidth+'px','height':cHeight+'px'}" @touchstart="touchPie"></canvas>
				<!--#endif-->
				<!--#ifndef MP-ALIPAY -->
				<canvas canvas-id="canvasPie" id="canvasPie" class="charts" @touchstart="touchPie"></canvas>
				<!--#endif-->
			</view>
			<view class="txtBox">
				<view v-for="i in PieData" class="paddtb2">
					<view class="flex ali-cen just-cent">
						<text class='radius50p mr20' style="height: 20rpx;width: 20rpx;" :style="{background:i.color}"></text>
						<text :style="{color:i.color}">{{i.name}}</text>
					</view>
				</view>
			</view>
			<!-- 暂无数据 -->
			<template v-if="PieData.length<=0">
				<view class='fo-gray fo-32 txt-cen center-center'>暂无数据，赶紧去打卡记录一下吧</view>
			</template>
		</view>



		<!-- 日历控件 -->
		<u-calendar v-model="calendarShow" mode="range" @change="onSelCalendar" start-text='开始范围' end-text="结束范围">
			<!-- <view slot="tooltip" class="padd20 flex">
				<text class="flex1 text-center">单天日期</text>
				<text class="flex1 text-center">日期范围</text>
			</view> -->
		</u-calendar>
	</view>
</template>

<script>
	import uCharts from '@/components/u-charts/u-charts.js';
	import mixins from '../../../mixin.js'
	var _self;
	var canvaPie = null;
	let times = null // 节流
	export default {
		props: {},
		name: "",
		data() {
			return {
				calendarShow: false, //日历控件是否显示
				StartData: this.$tool.create_time(new Date()), // 日期范围-开始日期
				EndData: "", // 日期范围-结束日期

				CurrentBtnIndex: 0, // 当前选中的按钮下标

				// 饼图
				cWidth: '', // 饼图宽度
				cHeight: '',
				pixelRatio: 1,
				textarea: '',
				PieData: [] // 饼图数据

			}
		},
		async created() {
			_self = this;
			let windowWidth = 375
			uni.getSystemInfo({
				success: function(res) {
					if(Math.floor(res.pixelRatio)<=2){
						_self.pixelRatio = _self.pixelRatio;
						_self.cHeight = 200;
					}
					_self.cWidth = res.windowWidth;
					_self.getServerData(_self.StartData);
				},
				fail() {
					_self.$pub.Toast('请推出去重新刷新~')
				}
			});
		},
		methods: {
			// 日历控件确定按钮
			onSelCalendar(e) {
				this.StartData = e.startDate
				this.EndData = e.endDate
				this.changeData(this.StartData + "~" + this.EndData, 'other')
			},
			// 选择日/周/月/自定义按钮
			onSel(num) {
				if (Number(num) === this.CurrentBtnIndex) return
				this.CurrentBtnIndex = Number(num)
				let D = new Date();
				switch (this.CurrentBtnIndex) {
					case 0:
						this.StartData = this.$tool.create_time(new Date())
						this.EndData = ''
						this.changeData(this.StartData, 'day')
						break;
					case 1:
						this.StartData = this.$tool.returnWeekRang(D).split('~')[0];
						this.EndData = this.$tool.returnWeekRang(D).split('~')[1];
						this.changeData(this.StartData + "~" + this.EndData, 'other')
						break;
					case 2:
						this.StartData = this.$tool.returnMonthRang(D).split('~')[0];
						this.EndData = this.$tool.returnMonthRang(D).split('~')[1];
						this.changeData(this.StartData + "~" + this.EndData, 'other')
						break;
					case 3:
						this.calendarShow = true
						break;
				}
			},
			// 快捷键-上一日/周/月
			onPre() {
				if (times) return
				times = setTimeout(() => {
					clearTimeout(times)
					times = null
				}, 500)
				let D = null;
				switch (this.CurrentBtnIndex) {
					case 0:
						D = new Date(new Date(this.StartData).getTime() - 1 * 1000 * 60 * 60 * 24);
						this.StartData = this.$tool.create_time(D);
						this.EndData = '';
						this.changeData(this.StartData, 'day')
						break;
					case 1:
						D = new Date(new Date(this.StartData).getTime() - 7 * 1000 * 60 * 60 * 24);
						this.StartData = this.$tool.returnWeekRang(D).split('~')[0];
						this.EndData = this.$tool.returnWeekRang(D).split('~')[1];
						this.changeData(this.StartData + "~" + this.EndData, 'other')
						break;
					case 2:
						let Dates = new Date(this.StartData).getMonth(); // 上个月的天数
						let Year = new Date(this.StartData).getFullYear();
						Dates = Dates === 0 ? 12 : Dates; // 如果是0就是12月份
						let FullMonNum = ([1, 3, 5, 7, 8, 10, 12].findIndex(i => i === Dates)) !== -1 ? 31 : 30 // 取上个月的天数
						let RunNian = ((Year % 4) == 0) && ((Year % 100) != 0) || ((Year % 400) == 0) ? 29 : 28; // 闰年月数
						FullMonNum = Dates === 2 ? RunNian : FullMonNum; //是否是在2月份


						D = new Date(new Date(this.StartData).getTime() - FullMonNum * 1000 * 60 * 60 * 24);
						this.StartData = this.$tool.returnMonthRang(D).split('~')[0];
						this.EndData = this.$tool.returnMonthRang(D).split('~')[1];
						this.changeData(this.StartData + "~" + this.EndData, 'other')
						break;
					case 3:
						this.$pub.Toast('自定义模式下不可操作')
						break;
				}
			},
			// 快捷键-下一日/周/月
			onNext() {
				if (times) return
				times = setTimeout(() => {
					clearTimeout(times)
					times = null
				}, 500)
				let D = null;
				switch (this.CurrentBtnIndex) {
					case 0:
						D = new Date(new Date(this.StartData).getTime() + 1 * 1000 * 60 * 60 * 24);
						this.StartData = this.$tool.create_time(D);
						this.EndData = '';
						this.changeData(this.StartData, 'day')
						break;
					case 1:
						D = new Date(new Date(this.StartData).getTime() + 7 * 1000 * 60 * 60 * 24);
						this.StartData = this.$tool.returnWeekRang(D).split('~')[0];
						this.EndData = this.$tool.returnWeekRang(D).split('~')[1];
						this.changeData(this.StartData + "~" + this.EndData, 'other')
						break;
					case 2:
						let Dates = new Date(this.StartData).getMonth() + 1; // 这个月的天数
						console.log(Dates)
						if (Dates === 13) {
							Dates = 12
						}
						let Year = new Date(this.StartData).getFullYear();
						let FullMonNum = ([1, 3, 5, 7, 8, 10, 12].findIndex(i => i === Dates)) !== -1 ? 31 : 30 // 取上个月的天数
						let RunNian = ((Year % 4) == 0) && ((Year % 100) != 0) || ((Year % 400) == 0) ? 29 : 28; // 闰年月数
						FullMonNum = Dates === 2 ? RunNian : FullMonNum; //是否是在2月份


						D = new Date(new Date(this.StartData).getTime() + FullMonNum * 1000 * 60 * 60 * 24);
						this.StartData = this.$tool.returnMonthRang(D).split('~')[0];
						this.EndData = this.$tool.returnMonthRang(D).split('~')[1];
						this.changeData(this.StartData + "~" + this.EndData, 'other')
						break;
					case 3:
						this.$pub.Toast('自定义模式下不可操作')
						break;
				}

			},
			// 初始化饼图数据
			getServerData(data) {
				// 赋值日饼图数据
				this.PieData = mixins.CurrentDayRecord(data, 'day')
				console.log(this.PieData)
				this.showPie("canvasPie", this.PieData);
			},
			// 改变饼图数据
			changeData(data, type) {
				this.PieData = mixins.CurrentDayRecord(data, type)
				this.showPie("canvasPie", this.PieData);
			},
			// 显示饼图数据
			showPie(canvasId, chartData) {
				canvaPie = new uCharts({
					$this: _self,
					canvasId: canvasId,
					type: 'pie',
					fontSize: 12,
					padding: [15, 15, 0, 15],
					legend: {
						show: false,
						padding: 0,
						lineHeight: 20,
						margin: 0,
					},
					background: '#FFFFFF',
					pixelRatio: _self.pixelRatio,
					series: chartData,
					animation: true,
					width: _self.cWidth * _self.pixelRatio * 0.95,
					height: _self.cHeight * _self.pixelRatio * 1.2,
					dataLabel: true,
					extra: {
						pie: {
							border: true,
							borderColor: '#FFFFFF',
							borderWidth: 3
						}
					},
				});
			},
			// 点击单个饼图操作
			touchPie(e) {
				canvaPie.showToolTip(e, {
					format: function(item) {
						return item.name + ':' + item.data
					}
				});
				canvaPie.touchLegend(e, {
					animation: true
				});
			},
			// 判断是否是json
			isJSON: function(str) {
				if (typeof str == 'string') {
					try {
						var obj = JSON.parse(str);
						if (typeof obj == 'object' && obj) {
							return true;
						} else {
							return false;
						}
					} catch (e) {
						console.log('error：' + str + '!!!' + e);
						return false;
					}
				}
			}
		}
	}
</script>

<style scoped lang="less">
	@fo-Skyblue: skyblue;

	.fo-Skyblue {
		color: @fo-Skyblue;
	}

	.bor-1-ebebeb {
		border: solid 1px #EBEBEB;
	}

	// 选中的按钮样式
	.CurrentSelectBtn {
		background-color: skyblue;
		color: blue;
	}


	// 图表样式
	/*样式的width和height一定要与定义的cWidth和cHeight相对应*/
	.qiun-charts {
		// width: 750upx;
		min-height: 500rpx;
		background-color: #FFFFFF;
		margin-top: 20rpx;

	}

	.charts {
		// width: 750upx;
		width: 100%;
		height: 500rpx;
		background-color: #FFFFFF;
	}
</style>
